.za-activity-indicator {
    display: inline-block;
    position: relative;
    transform: rotate(-90deg);
    width: var(--activity-indicator-size-md);
    height: var(--activity-indicator-size-md);
    /* sizes */
}
.za-activity-indicator__path {
    stroke: var(--activity-indicator-path-color);
}

.za-activity-indicator__line {
    stroke-dasharray: 314.1592674;
    stroke: var(--theme-primary);
}

.za-activity-indicator--lg {
    width: var(--activity-indicator-size-lg);
    height: var(--activity-indicator-size-lg);
}

.za-activity-indicator--circular {
    display: inline-block;
}
.za-activity-indicator--circular svg {
    vertical-align: top;
    animation: za-activity-indicator_rotate360 2s linear infinite;
}
.za-activity-indicator--circular circle {
    stroke-linecap: round;
    stroke: var(--theme-primary);
    animation: za-activity-indicator_rotate-circular 1.5s ease-in-out infinite;
}

.za-activity-indicator--spinner {
    animation: za-activity-indicator_rotate360 0.8s linear infinite;
    animation-timing-function: steps(12);
}
.za-activity-indicator--spinner div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.za-activity-indicator--spinner div:nth-of-type(1) {
    transform: rotate(30deg);
    opacity: 0.0833333333;
}
.za-activity-indicator--spinner div::before {
    content: "";
    display: block;
    width: 2px;
    height: 25%;
    margin: 0 auto;
    background-color: var(--activity-indicator-spinner-color);
    border-radius: 40%;
}
.za-activity-indicator--spinner div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.za-activity-indicator--spinner div:nth-of-type(2) {
    transform: rotate(60deg);
    opacity: 0.1666666667;
}
.za-activity-indicator--spinner div::before {
    content: "";
    display: block;
    width: 2px;
    height: 25%;
    margin: 0 auto;
    background-color: var(--activity-indicator-spinner-color);
    border-radius: 40%;
}
.za-activity-indicator--spinner div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.za-activity-indicator--spinner div:nth-of-type(3) {
    transform: rotate(90deg);
    opacity: 0.25;
}
.za-activity-indicator--spinner div::before {
    content: "";
    display: block;
    width: 2px;
    height: 25%;
    margin: 0 auto;
    background-color: var(--activity-indicator-spinner-color);
    border-radius: 40%;
}
.za-activity-indicator--spinner div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.za-activity-indicator--spinner div:nth-of-type(4) {
    transform: rotate(120deg);
    opacity: 0.3333333333;
}
.za-activity-indicator--spinner div::before {
    content: "";
    display: block;
    width: 2px;
    height: 25%;
    margin: 0 auto;
    background-color: var(--activity-indicator-spinner-color);
    border-radius: 40%;
}
.za-activity-indicator--spinner div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.za-activity-indicator--spinner div:nth-of-type(5) {
    transform: rotate(150deg);
    opacity: 0.4166666667;
}
.za-activity-indicator--spinner div::before {
    content: "";
    display: block;
    width: 2px;
    height: 25%;
    margin: 0 auto;
    background-color: var(--activity-indicator-spinner-color);
    border-radius: 40%;
}
.za-activity-indicator--spinner div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.za-activity-indicator--spinner div:nth-of-type(6) {
    transform: rotate(180deg);
    opacity: 0.5;
}
.za-activity-indicator--spinner div::before {
    content: "";
    display: block;
    width: 2px;
    height: 25%;
    margin: 0 auto;
    background-color: var(--activity-indicator-spinner-color);
    border-radius: 40%;
}
.za-activity-indicator--spinner div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.za-activity-indicator--spinner div:nth-of-type(7) {
    transform: rotate(210deg);
    opacity: 0.5833333333;
}
.za-activity-indicator--spinner div::before {
    content: "";
    display: block;
    width: 2px;
    height: 25%;
    margin: 0 auto;
    background-color: var(--activity-indicator-spinner-color);
    border-radius: 40%;
}
.za-activity-indicator--spinner div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.za-activity-indicator--spinner div:nth-of-type(8) {
    transform: rotate(240deg);
    opacity: 0.6666666667;
}
.za-activity-indicator--spinner div::before {
    content: "";
    display: block;
    width: 2px;
    height: 25%;
    margin: 0 auto;
    background-color: var(--activity-indicator-spinner-color);
    border-radius: 40%;
}
.za-activity-indicator--spinner div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.za-activity-indicator--spinner div:nth-of-type(9) {
    transform: rotate(270deg);
    opacity: 0.75;
}
.za-activity-indicator--spinner div::before {
    content: "";
    display: block;
    width: 2px;
    height: 25%;
    margin: 0 auto;
    background-color: var(--activity-indicator-spinner-color);
    border-radius: 40%;
}
.za-activity-indicator--spinner div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.za-activity-indicator--spinner div:nth-of-type(10) {
    transform: rotate(300deg);
    opacity: 0.8333333333;
}
.za-activity-indicator--spinner div::before {
    content: "";
    display: block;
    width: 2px;
    height: 25%;
    margin: 0 auto;
    background-color: var(--activity-indicator-spinner-color);
    border-radius: 40%;
}
.za-activity-indicator--spinner div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.za-activity-indicator--spinner div:nth-of-type(11) {
    transform: rotate(330deg);
    opacity: 0.9166666667;
}
.za-activity-indicator--spinner div::before {
    content: "";
    display: block;
    width: 2px;
    height: 25%;
    margin: 0 auto;
    background-color: var(--activity-indicator-spinner-color);
    border-radius: 40%;
}
.za-activity-indicator--spinner div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.za-activity-indicator--spinner div:nth-of-type(12) {
    transform: rotate(360deg);
    opacity: 1;
}
.za-activity-indicator--spinner div::before {
    content: "";
    display: block;
    width: 2px;
    height: 25%;
    margin: 0 auto;
    background-color: var(--activity-indicator-spinner-color);
    border-radius: 40%;
}

@keyframes za-activity-indicator_rotate-circular {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 120, 200;
        stroke-dashoffset: -60;
    }
    100% {
        stroke-dasharray: 120, 200;
        stroke-dashoffset: -180;
    }
}
@keyframes za-activity-indicator_rotate360 {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
